html,body {height: 100%;}

body {background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnV5w03OKMC8WYLDh-XpDEUBbKyTrNYyd9oQ&usqp=CAU);}

.animate {
  -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

/*-------------------------------
general
--------------------------------*/
.button {text-decoration: none;}
#docu {color: #ff0000a8;}
#docu:hover {padding: 5px 5px; background-color: #f5000056; color: #eee;}
#fb {color: #eee;}
#ig {color: #eee;}
#yt {color: #eee; }
#fb:hover {color: #363636;}
#ig:hover {color: #363636;}
#yt:hover {color: #363636;}


/*--------------------------------------------
header
----------------------------------------------*/
.header {background: #111111}
.header__menu {float:right;margin:0; padding:0;}
.header__menu__item {display: inline-block;}
.header__menu__item a{color: #fff;display: block;padding:20px; text-decoration: none;font-family:sans-serif;font-size: 10px;}
.header__menu__item a:hover {background: #ff0000a8}
.header__menu__itemdiv {display: inline-block;}
.header__menu__itemdiv a{ color: #eee; background:#363636; display: block;padding:20px; text-decoration: none;font-family:sans-serif;font-size: 10px;}

.header__icon-bar {display: block;float: right;padding: 20px;display: none;}
.header__icon-bar span {display: block;height: 3px; width: 30px;background: #fff; margin-bottom:5px;}


/*---------------------------------
cover
----------------------------------*/
.cover{height: 75%;
  background-image :url(https://i0.wp.com/secolo-trentino.com/wp-content/uploads/2022/02/Frank-Nemola-con-Vasco.jpg?fit=960%2C702&ssl=1); 
  background-size: cover;
  position: relative;
}
.cover__filter {
background: #000;
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
opacity:0.5;
}
.cover__caption{
    display: table;
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 1;
    font-family: sans-serif;
    font-size: 13px;
  }
.cover__caption__copy{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #fff;}

 /*----------------------------------------
  banner
  ----------------------------------------*/
  .banner{background: #fff; height: 30%; }
  .banner__copy {width: 50%; float: left; height: 100%; margin-left: 120px;}
  .banner__copy___text {font-family:sans-serif; display: table-cell; vertical-align: middle; padding: 30px; font-size: 20px; }
  .banner__copy___text h3 {font-family:sans-serif; font-size: 40px; margin-bottom:10px; margin-top: 26px; }


/*---------------------------------------------
cards
---------------------------------------------*/
.cards {max-width: 600px; margin:40px auto;}
.card {width: 30%; margin: 0 1.5%; background: #fff; float:left; margin-bottom: 20px; border-radius: 5px;}
.card__image{width: 100%; height: auto; border-radius: 5px;}
.card__copy{padding: 5px 30px; font-family:sans-serif;}
.card__copy h3 {margin-bottom:0;font-family:sans-serif; font-size:12px;}
.card__copy p {margin-bottom:0;font-family:sans-serif; font-size:8px;}

/*---------------------------------------------
footer
----------------------------------------------*/
.container {text-align: center; background: #111111; padding-top: 25px; width: 100%; position: absolute; top: 3400%;}
.row {text-align: center; color: #fff; font-family: sans-serif; position: relative; font-size: 10px;margin-top: 30px;}
.follow {font-family: sans-serif; font-size: 8px;margin-bottom: 0px;}
.icons {text-align: center; color: #eee;}
.icons__item {display:inline-block; font-size: 30px; padding: 10px;margin-bottom: 20px;} 
ul {list-style-type:none;}

  
  .clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }